//顶部切换
$(".sec-banner-btn i").each((i)=> {
    let index = i;
    $(".sec-banner-btn i").eq(i).mouseover(() => {
        $(".sec-banner-btn i").each((j) => {
            $(".sec-banner-btn i").eq(j).css("background", "#666666");
        });
        $(".sec-banner-btn i").eq(index).css("background", "#eb8c27");
        $(".sec-banner").css("background", `url("img/banner_a${index}.png") no-repeat center`);
    });
});
//浮动窗
let json;
function Close(n){
    $(n).remove();
}
//设计师浮动窗
function picPerson(index) {
    $("body").append(`
        <div class="picPerson">
            <div class="dBody">
                <i class="picImg"><img src="img/close.jpg" alt="" onclick="Close('.picPerson')"></i>
                <img src="img/${json.person[index].src}" alt="">
                <p class="title" style="font-size: 36px">${json.person[index].name}</p>
                <p class="title" style="font-size: 24px">${json.person[index].job}</p>
                <p>${json.person[index].present}</p>
            </div>
        </div>
            `)
}
//风格浮动窗
function picStyle(index){
    $("body").append(`
                <div class="picStyle">
                    <div class="dBody">
                        <i class="picImg"><img src="img/close.jpg" alt="" onclick="Close('.picStyle')"></i>
                        <p class="title" style="font-size: 36px">${json.style[index].title}</p>
                        <img src="img/design_${json.style[index].src}" alt="">
                        <p>${json.style[index].text}</p>
                    </div>
                </div>
            `)
}
$.ajax({
    type: "get",
    url: "http://www.shouziliu.com/LTO/design/",
    success: (data) => {
        json=data;
        //设计师
        data.person.forEach((content,index) => {
            //左侧
            if(!index){
                $(".personal-tailor-imgs").prepend(`
                    <div class="personal-tailor-worker personal-tailor-worker-big">
                        <i><img src="img/${data.person[0].src}" alt=""></i>
                        <div class="personal-tailor-worker-txt">
                            <h1>${data.person[0].name}</h1>
                            <h2>${data.person[0].job}</h2>
                            <p class="color-gry">${data.person[0].present}</p>
                            <p><span onclick="picPerson(0)">点击详情</span><span>》</span></p>
                        </div>
                    </div>
        `);
            }
            //右侧列表
            else if(index>0 && index <5) {
                $(".personal-tailor--imgs-list").append(`
                        <div class="personal-tailor-worker personal-tailor-worker-small">
                            <i><img src="img/${content.src}" alt=""></i>
                            <div class="personal-tailor-worker-txt">
                                <h1 style="font-size: 9px">${content.name}</h1>
                                <h2 style="font-size: 7px">${content.job}</h2>
                                <p class="color-gry" style="font-size: 7px">${content.present}</p>
                                <p style="font-size: 7px"><span onclick="picPerson(${index})">点击详情</span><span>》</span></p>
                            </div>
                        </div>
                `);
            }
        });
        //设计风格
        data.style.forEach((content,index) => {
            $(".design-style-content").append(`
            <div class="design-style-items">
                <i><img src="img/design_${content.src}" alt=""></i>
                <div class="design-style-txt">
                    <h1 class="color-org">${content.title}</h1>
                    <p>${content.text}</p>
                    <p><span onclick="picStyle(${index})">点击更多</span><span>》</span></p>
                </div>
            </div>
        `);
        });
    }
});